---
id: treeShaking
title: treeShaking
---
又叫按需引入  
就是在项目中没有用到的代码，构建时不会打包到项目里面，从而减少体积。

## ES 模块
ES6 Module 才能让 tree-shaking 生效
```js
// 生产环境下打包，包内只会有test 一个方法。
import { test } from "xxxx";
test();
```

## sideEffects  = true
是webpack4新增的功能。允许通过配置的方式去标识代码是否有副作用，从而为 Tree Shaking 提供更多的压缩空间。
```json
// package.json
"name":"test"
"sideEffects": false,
```

## ES6 Module 和 Commonjs 区别
- ES6 Module 静态引入，编译时引入
- Commonjs 动态引入，执行时引入
- 只有ES6Module 才能静态分析，实现 Tree-Shaking
